<template>
  <div class="app-container">
    <el-row class="customer-row">
      <el-col :span="24">
        <span>近30天评价统计：</span>
        <span>商家评分：-- |</span>
        <span>口味评分：-- |</span>
        <span>包装评分：-- |</span>
        <span>配送满意度：-- （专送）</span>
        <span @click="toDetail">查看评价统计详情</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <span>管理评价：</span>
        <el-radio-group v-model="form.reply" @change="search">
          <el-radio :label="3">全部</el-radio>
          <el-radio :label="6">已回复</el-radio>
          <el-radio :label="9">未回复</el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <span>订单状态：</span>
        <el-radio-group v-model="form.good" @change="search">
          <el-radio :label="9">全部</el-radio>
          <el-radio :label="5">好评</el-radio>
          <el-radio :label="3">中评</el-radio>
          <el-radio :label="1">差评</el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <span>配送状态：</span>
        <el-radio-group v-model="form.text" @change="search">
          <el-radio :label="9">全部</el-radio>
          <el-radio :label="0">有内容</el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <span>选择日期：</span>
        <el-date-picker
          @change="search"
          size="small"
          v-model="begin"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="开始日期">
        </el-date-picker>
        <el-date-picker
          @change="search"
          size="small"
          v-model="end"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="结束日期">
        </el-date-picker>
      </el-col>
    </el-row>
    <el-container>
      <el-header>符合条件的评价</el-header>
      <el-main>
        <ul class="admin-comments">
          <li v-for="item,index in tableData" :key="index">
            <el-row>
              <el-col :span="14">
                <h5>{{item.customerName}} <span>{{item.saveTime}}</span></h5>
                <p>评论内容：{{item.remark}}</p>
                <p style="color: red;cursor: pointer;" v-if="!item.reply">回复</p>
                <p style="margin-top: 5px" v-if="item.reply">商家回复：{{item.reply}}</p>
                <el-input size="small" style="width: 300px;" v-if="!item.reply" type="textarea" v-model="item.replyText"></el-input>
                <p style="font-size: 10px;margin-top: 2px;cursor: pointer;" v-if="!item.reply">
                  <span @click="reply(item)">提交</span> <span @click="inputFlag = false">取消</span>
                </p>
              </el-col>
              <el-col :span="6" style="padding-top: 30px">
                <el-col :span="6">
                  <div style="line-height: 18px">商家评分：</div>
                </el-col>
                <el-col :span="18">
                  <el-rate
                    v-model="item.stars"
                    disabled>
                  </el-rate>
                </el-col>
                <el-col :span="6">
                  <div style="line-height: 18px">包装评分：</div>
                </el-col>
                <el-col :span="18">
                  <el-rate
                    v-model="item.packageStars"
                    disabled>
                  </el-rate>
                </el-col>
                <el-col :span="6">
                  <div style="line-height: 18px">配送评分：</div>
                </el-col>
                <el-col :span="18">
                  <el-rate
                    v-model="item.postalStars"
                    disabled>
                  </el-rate>
                </el-col>
                <el-col :span="6">
                  <div style="line-height: 18px">口味评分：</div>
                </el-col>
                <el-col :span="18">
                  <el-rate
                    v-model="item.tasteStars"
                    disabled>
                  </el-rate>
                </el-col>
              </el-col>
              <el-col :span="4">
                <!--<el-tooltip class="item" effect="dark" :content="food" placement="bottom-end">-->
                  <!--<span style="float:right;color: #ff4081;cursor: pointer;" @mouseenter="getDetail(item.orderId)">查看详情</span>-->
                <!--</el-tooltip>-->
                <el-popover
                  placement="bottom-start"
                  width="200"
                  trigger="hover"
                  :content="food">
                  <!--<el-button slot="reference">hover 激活</el-button>-->
                  <span style="float:right;color: #ff4081;cursor: pointer;" slot="reference" @mouseenter="getDetail(item.orderId)">查看详情</span>
                </el-popover>
              </el-col>
            </el-row>
          </li>
          <li v-if="tableData.length === 0" class="data">暂无数据</li>
        </ul>
      </el-main>
    </el-container>

    <!--分页-->
    <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="page.total">
    </el-pagination>
  </div>
</template>

<script>
  import { admin_comments_page, admin_comments_detail, admin_comments_reply } from '@/api/index'
  import { page } from '@/mixins/page'

  export default {
    mixins: [page],
    data() {
      return {
        begin: '',
        end: '',
        inputFlag: false,
        loading: true,
        form: {
          reply: 3,
          good: 9,
          text: 9
        },
        tableData: [],
        food: '',
        replyText: ''
      }
    },
    methods: {
      search() {
        if (this.form.text === 9) {
          delete this.page._filter_isnotnull_content
        } else {
          this.page._filter_isnotnull_content = 0
        }
        if (this.form.good === 9) {
          delete this.page._filter_eq_stars
        } else {
          this.page._filter_eq_stars = this.form.good
        }
        if (this.form.reply === 6) {
          this.page._filter_isnotnull_reply = 1
          delete this.page._filter_isnull_reply
        } else if (this.form.reply === 9) {
          this.page._filter_isnull_reply = 1
          delete this.page._filter_isnotnull_reply
        } else if (this.form.reply === 3) {
          delete this.page._filter_isnull_reply
          delete this.page._filter_isnotnull_reply
        }
        if (this.begin && !this.end) {
          this.$message({ type: 'warning', message: '请选择结束时间' })
          return
        }
        if (!this.begin && this.end) {
          this.$message({ type: 'warning', message: '请选择开始时间' })
          return
        }
        if (this.begin && this.end) {
          this.page._filter_bt_saveTime = []
          this.page._filter_bt_saveTime.push(this.begin)
          this.page._filter_bt_saveTime.push(this.end)
        }
        console.log(this.page)
        this.getInfo()
      },
      toDetail() {
        this.$router.push({ name: 'customerDetail' })
      },
      getInfo() {
        admin_comments_page(this.page).then(res => {
          console.log(res)
          res.content.forEach(item => {
            item.replyText = ''
          })
          this.page.total = res.totalElements
          this.tableData = res.content
          this.loading = false
        })
      },
      getDetail(id) {
        this.food = ''
        const params = {
          id: id
        }
        admin_comments_detail(params).then(res => {
          console.log(res)
          res.forEach(item => {
            this.food = item.productName + this.food + '×' + item.quantity
          })
          console.log('-------------------------')
        })
      },
      reply(item) {
        if (!item.replyText) {
          this.$message({ type: 'warning', message: '请输入回复' })
          return
        }
        const params = {
          id: item.id,
          content: { reply: item.replyText }
        }
        admin_comments_reply(params).then(res => {
          console.log(res)
          this.$message({ type: 'success', message: '回复成功' })
          this.getInfo()
        })
      }
    },
    mounted() {
      this.getInfo()
    }
  }
</script>

<style src="./index.scss" lang="scss" scoped></style>
